<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>睿云 让生活更美好！</title>
    <link rel="stylesheet" href="../../../../static/css/element.css" th:href="@{/css/element.css}">
    <link rel="stylesheet" href="../../../../static/css/global.css" th:href="@{/css/global.css}"/>
    <link rel="stylesheet" href="../../../../static/css/main.css" th:href="@{/css/main.css}"/>
    <link rel="stylesheet" href="../../../../static/css/myelement.css" th:href="@{/css/myelement.css}"/>
    <script src="../../../../static/js/vue.js" th:src="@{/js/vue.js}"></script>
    <script src="../../../../static/js/element.js" th:src="@{/js/element.js}"></script>
</head>
<body>
<div id="app">
    <div class="main-content" v-cloak>
        <div class="page-header">
            <h1 class="page-title">新增角色</h1>
            <div class="breadcrumb"><a href="javascript: top.location.reload();">首页</a><span>/</span>系统<span>/</span>角色列表</div>
        </div>
        <div class="main-content-body" v-loading.fullscreen="loading">
            <div class="edit-form">
                <el-form ref="role-form" :model="role" :rules="rules" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="角色名称" prop="name">
                        <el-input v-model="role.name" placeholder="请输入角色名称"></el-input>
                    </el-form-item>
                    <!--<el-form-item label="角色类型" prop="type">
                        <el-select v-model="role.type" placeholder="请选择角色类型">
                            <el-option v-for="type in typeList" :key="type.value" :label="type.name" :value="type.value"></el-option>
                        </el-select>
                    </el-form-item>-->
                    <el-form-item>
                        <div class="z-box-info">
                            <p>请在下方勾选角色拥有的菜单和权限；</p>
                            <p>左侧【粗体】部分为菜单，右侧为菜单页面对应的权限。</p>
                        </div>
                    </el-form-item>
                    <el-form-item label="权限明细" class="auth-form-item">
                        <div v-for="firstMenu in menuTree" :key="firstMenu.uuid" class="edit-itemes">
                            <div class="edit-limit">
                                <el-checkbox v-model="menuList[firstMenu.uuid].isCheck"
                                             @change="value => handleMenuChange(value, firstMenu)">{{firstMenu.name}}
                                </el-checkbox>
                            </div>
                            <div class="o_f">
                                <div class="clearfix" v-for="secondMenu in firstMenu.childrens" :key="secondMenu.uuid">
                                    <template v-if="secondMenu.permissionList != null">
                                        <div class="edit-limit-2-3">
                                            <el-checkbox v-model="menuList[secondMenu.uuid].isCheck"
                                                         @change="value => handleMenuChange(value, secondMenu)">{{secondMenu.name}}
                                            </el-checkbox>
                                        </div>
                                        <div class="edit-limit-info ml_280">
                                            <el-checkbox-group v-model="menuList[secondMenu.uuid].permissions"
                                                               @change="value => handlePermissionChange(value, secondMenu)">
                                                <el-checkbox v-for="permission, index in secondMenu.permissionList"
                                                             :key="permission.uuid"
                                                             :label="permission.uuid">{{permission.name}}
                                                </el-checkbox>
                                            </el-checkbox-group>
                                        </div>
                                    </template>
                                    <template v-else>
                                        <div class="edit-limit-2">
                                            <el-checkbox v-model="menuList[secondMenu.uuid].isCheck"
                                                         @change="value => handleMenuChange(value, secondMenu)">{{secondMenu.name}}
                                            </el-checkbox>
                                        </div>
                                        <div class="o_f">
                                            <div class="clearfix" v-for="thirdMenu in secondMenu.childrens" :key="thirdMenu.uuid">
                                                <div class="edit-limit-2">
                                                    <el-checkbox v-model="menuList[thirdMenu.uuid].isCheck"
                                                                 @change="value => handleMenuChange(value, thirdMenu)">{{thirdMenu.name}}
                                                    </el-checkbox>
                                                </div>
                                                <div v-if="thirdMenu.permissionList != null" class="edit-limit-info">
                                                    <el-checkbox-group v-model="menuList[thirdMenu.uuid].permissions"
                                                                       @change="value => handlePermissionChange(value, thirdMenu)">
                                                        <el-checkbox v-for="permission, index in thirdMenu.permissionList" :key="permission.uuid" :label="permission.uuid">{{permission.name}}</el-checkbox>
                                                    </el-checkbox-group>
                                                </div>
                                            </div>
                                        </div>
                                    </template>
                                </div>
                            </div>
                        </div>
                    </el-form-item>
                </el-form>
                <div class="edit-button-fixed">
                    <div class="edit-button">
                        <el-button type="primary" @click="handleSave" v-cloak>保存角色</el-button>
                        <el-button @click="handleCancel" v-cloak>取消</el-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script src="../../../../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
<script th:inline="javascript">
    new Vue({
        el: "#app",
        data: {
            loading: false,
            typeList: [{name: "平台角色", value: 0}, {name: "商户角色", value: 1}],
            menuTree: [[${menuTree}]],
            menuList: {},
            permissionList: {},
            type: [[${type}]],
            role: {
                name: '',
                type: [[${type}]],
                permission: {}
            },
            rules: {
                name: [
                    {required: true, message: "请输入角色名称", trigger: 'blur'}
                ]
            }
        },
        created: function () {
            let self = this;
            convertMenuTreeToList(self.menuTree, self.menuList, self);
        },
        methods: {
            handleMenuChange(value, menu) {
                let self = this;
                changeParentMenu(menu, value, self);
                changeChildrenMenuAndPermission(menu, self.menuList, value, self)
            },
            handlePermissionChange(value, menu) {
                let self = this;
                if (this.menuList[menu.uuid].isCheck && this.menuList[menu.uuid].permissionList.length === 0) {
                    changeParentMenu(menu, false, self);
                } else if (!this.menuList[menu.uuid].isCheck && this.menuList[menu.uuid].permissionList.length > 0) {
                    changeParentMenu(menu, true, self);
                }
            },
            handleSave: function () {
                let self = this;
                self.loading = true;
                let checkedMenus = [];
                let checkedPermissions = [];
                for (let uuid in self.menuList) {
                    let menu = self.menuList[uuid];
                    if (menu.isCheck) {
                        if (menu.permissionList && menu.permissionList.length > 0) {
                            for (let uuid of menu.permissionList) {
                                checkedPermissions.push({uuid: uuid})
                            }
                        }
                        checkedMenus.push(menu);
                    }
                }

                let role = {
                    name: self.role.name,
                    type: self.role.type,
                    menuList: checkedMenus,
                    permissionList: checkedPermissions
                };

                self.$refs['role-form'].validate((valid) => {
                    if (valid) {
                        $.ajax({
                            url: "/backstage/permission/role/add",
                            type: "POST",
                            data: JSON.stringify(role),
                            contentType: "application/json;charset=UTF-8",
                            dataType: "json",
                            success: function (data) {
                                self.loading = false;
                                if (data) {
                                    if (data.returnCode === 1) {
                                        self.$message({
                                            message: '新增角色成功',
                                            type: 'success',
                                            customClass: 'message-center',
                                            duration: 1500,
                                            onClose: function () {
                                                window.location.href = '/backstage/permission/role/tolist?type=' + self.type;
                                            }
                                        });
                                    } else {
                                        self.$message({
                                            message: data.returnNote,
                                            type: 'error',
                                            customClass: 'message-center',
                                            showClose: true,
                                            duration: 3000,
                                        });
                                    }
                                } else {
                                    self.$message({
                                        message: '新增角色失败',
                                        type: 'error',
                                        customClass: 'message-center',
                                        duration: 1500,
                                    });
                                }
                            },
                            error: function () {
                                self.loading = false;
                                self.$message({
                                    message: '出错了，请请稍后再试或联系管理员.',
                                    type: 'error',
                                    customClass: 'message-center',
                                    duration: 1500,
                                });
                            }
                        });
                    } else {
                        self.loading = false;
                    }
                });
            },
            handleCancel: function () {
                window.location.href = "/backstage/permission/role/tolist?type=" + this.type;
            }
        }
    });

    function changeParentMenu(menu, isCheck, self) {
        self.menuList[menu.uuid].isCheck = isCheck;
        if (menu.parentId !== "") {
            let patentMenu = self.menuList[menu.parentId];
            changeParentMenu(patentMenu, isCheck, self);
        }
    }

    function changeChildrenMenuAndPermission(menu, menuList, isCheck, self) {
        self.menuList[menu.uuid].isCheck = isCheck;
        if (menu.childrens.length !== 0) {
            for (let childMenu of menu.childrens) {
                changeChildrenMenuAndPermission(childMenu, self.menuList, isCheck, self);
            }
        } else {
            if (menu.permissionList) {
                if (isCheck) {
                    for (let permission of menu.permissionList) {
                        self.menuList[menu.uuid].permissions.push(permission.uuid);
                    }
                } else {
                    self.menuList[menu.uuid].permissions = [];
                }
            }
        }
    }

    function convertMenuTreeToList(menuTree, menuList, self) {
        for (let menu of menuTree) {
            self.$set(menuList, [menu.uuid], {uuid: menu.uuid, isCheck: false, parentId: menu.parentId, permissions: []});
            if (menu.childrens.length > 0) {
                convertMenuTreeToList(menu.childrens, menuList, self);
            }
        }
    }
</script>
</html>
